<template>
    <div class="getBill">
      <div class="leftdiv">
          <img src="http://wsyy.whwater.com:2019/images/person1.png" alt="" width="318px" height="233px">
      </div>
      <div class="rightdiv">
        <el-form :model="getBillForm" ref="getBillForm" label-width="100px" class="demo-ruleForm">
            
            
  <el-form-item
    label="用户卡号"
    prop="card"
    :rules="[
      { required: true, message: '用户卡号不能为空'},
      { type: 'number', message: '用户卡号必须为数字值'}
    ]"
  >
    <el-input type="card" v-model.number="getBillForm.card" autocomplete="off"></el-input>
  </el-form-item>
           
             
    <el-form-item
    label="发票号"
    prop="billNum"
    :rules="[
      { required: true, message: '发票号不能为空'},
      { type: 'number', message: '发票号必须为数字值'}
    ]"
  >
    <el-input type="billNum" v-model.number="getBillForm.billNum" autocomplete="off"></el-input>
  </el-form-item>
     
  <el-form-item>
    <el-button type="primary" @click="submitForm(getBillForm)">提交</el-button>
    <el-button @click="resetForm('getBillForm')">重置</el-button>
  </el-form-item>
</el-form>
      </div>
    </div>
</template>

<style>
    .leftdiv{
      margin-left: 300px;
      /* border: 1px solid red; */
      float: left;
    }
    .rightdiv{
      /* border: 1px solid red; */
      margin-top: 50px;
      margin-left: 50px;
      width:500px;
      height: 235px;
      float: left;
    } 
    .getBill{
      /* border: 1px red solid; */
      width: 100%;
      height: 100%;
      /* background:url('http://n.sinaimg.cn/sinacn20191124ac/219/w2048h1371/20191124/a02f-iittafr8179265.jpg')  no-repeat ; */
      /* background-size: cover;
      background-attachment: fixed; */
    }
</style>
<script>
export default {
    name:'GetBill',
    data(){
        return{
            getBillForm:{
                card:'',
                billNum:''
            }
        }
    },
    methods:{
        submitForm(getBillForm){
          this.$http.get("/payment-form/getBillDetail",{params:{card:getBillForm.card,billNum:getBillForm.billNum}})
          .then((result) => {
            console.log(result);
            if(result.data.status){
              this.$url.setCard(this.getBillForm.card);
              this.$url.setBillNum(this.getBillForm.billNum);

              this.$router.push({
              path:"/getBillDetail",
              query:{arrearsData:result.data.object}
            }) }
            else{
              alert(result.data.message)
            }
        }
        ).catch((err) => {
            console.error(err);
        });
       
        },
         resetForm(getBillForm) {
            this.$refs[getBillForm].resetFields();
      }
    },
    mounted(){
    this.getBillForm.card=this.$url.state.card;
    this.getBillForm.billNum=this.$url.state.billNum;
    }
}
</script>